import React from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform
} from 'react-native';

import CommonListPage from '../common/CommonListPage';
import SizeUtils from '../../common/SizeUtils';
import HeartRequestZJListAction from '../../actions/heart/HeartRequestZJListAction';
import BaseItem from '../common/BaseItem';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';
import CommonDataListView from '../common/CommonDataListView';
export default class HeartZJListView extends CommonDataListView {
  constructor(props) {
    super(props);

    this._showType = 0;
    this._viewPager = null;
    this._noEmpty = true;
    this._dataKey = "expert_id";
  }

  _getStyle() {
    return {
        alignItems: 'center',
        width:SizeUtils.getWindowSize().width,
        height:this.props.style.height,
        backgroundColor:"#ffffff"};
  }

  _requestData(page, listView) {
      new HeartRequestZJListAction().call(this, {page:page, page_size:10,  sort_id:1,recommended:this.props.recommended});
  }

  _onRenderItem(data, rowID) {
    return (<Item key={rowID} data={data} rowID={rowID}/>)
  }

  _onPressItem(data) {
    data.type = this.props.type;
    data.recommended = this.props.recommended;
    this.gotoPage(Config.pages.heart_expert_data, data);
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <View
          style={{flex:1, flexDirection:"column",
              alignItems: 'center',
              backgroundColor:"#ffffff",
              borderColor:"#eeeeee",
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginTop:SizeUtils.translateDesignHeightToCode(30),
              paddingBottom:SizeUtils.translateDesignHeightToCode(20),
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
            <TImage source={this._getImageSource(this.props.data)}
              style={{width:670,height:340}}/>
            <View style={{
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
                flexDirection: "column", }}>
                  <Text
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32)}]}>
                      {this.props.data.name + "/" + this.props.data.title}
                  </Text>
                  <Text
                    style={[CommonStyles.primaryText, {textAlign:"right" ,fontSize:SizeUtils.translateFontSizeToCode(28), color:"#cccccc"}]}>
                      {this.props.data.level}
                  </Text>
            </View>
        </View>
    )
  }

  _getImageSource(data) {
    if(data.image_urls && data.image_urls[0]) {
      return {uri: data.image_urls[0]};
    }
    else {
      return {uri: ""};
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity(time)
    return timeStr;
  }
}
